<script setup>
import { ref } from 'vue'
import { route } from 'uview-plus'
import { onShow } from '@dcloudio/uni-app'
import { getInfoApi, updateInfoApi } from '@/apis/user'
const formData = ref({
  username: '',
  nickName: '',
  introduceSign: '',
  gender: ''
})
const formRef = ref(null)
const formRules = {
  nickName: [
    {
      type: 'string',
      required: true,
      message: '请输入昵称',
      trigger: 'blur'
    },
    {
      type: 'string',
      min: 2,
      max: 10,
      message: '长度在 2 到 10 个字符',
      trigger: 'blur'
    }
  ],
  gender: [
    {
      type: 'number',
      required: true,
      message: '请选择性别',
      trigger: 'blur'
    },
    {
      type: 'number',
      min: 1,
      max: 2,
      message: '请选择正确的性别',
      trigger: 'blur'
    }
  ]
}
onShow(async () => {
  const res = await getInfoApi()
  formData.value = res.data.data
})

// 修改
const onUpdateInfo = async () => {
  try {
    await formRef.value.validate()
    await updateInfoApi(formData.value)
    uni.showToast({
      title: '修改成功',
      icon: 'success'
    })
    setTimeout(() => {
      route({
        url: '/pages/user/index',
        type: 'tab'
      })
    }, 1000);
  } catch (error) {
    console.log(error)
  }
}

</script>
<template>
  <view class="page">
    <view class="nav">
      <up-navbar :placeholder="true" border :autoBack="true" title="修改信息" rightIcon="more-dot-fill">
      </up-navbar>
    </view>
    <view class="content">
      <up-form class="form-box" :model="formData" :rules="formRules" ref="formRef" labelWidth="4rem">
        <up-form-item label="用户名" prop="username" borderBottom>
          <up-input v-model="formData.username" disabled></up-input>
        </up-form-item>
        <up-form-item label="昵称" prop="nickName" borderBottom>
          <up-input v-model="formData.nickName"></up-input>
        </up-form-item>
        <up-form-item class="item" label="性别" prop="gender" borderBottom>
          <up-radio-group v-model="formData.gender" @change="e => formData.gender = e">
            <up-radio class="gender-item" :name="1" label="男"></up-radio>
            <up-radio class="gender-item" :name="2" label="女"></up-radio>
          </up-radio-group>
        </up-form-item>
        <up-form-item class="item" label="个性签名" prop="introduceSign" borderBottom>
          <up-textarea v-model="formData.introduceSign" placeholder="个性签名" :maxlength="200" count></up-textarea>
        </up-form-item>
        <up-form-item class="item">
          <up-button class="but" type="primary" text="确定修改" @click="onUpdateInfo" color="#52ABAD"
            shape="circle"></up-button>
        </up-form-item>
      </up-form>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.page {
  .content {
    padding-left: 2rem;
    padding-right: 2rem;

    .form-box {
      .item {
        .gender-item {
          margin-right: 2rem;
        }

        .but {
          height: 3rem;
          width: 60%;
          display: flex;
          margin: 0 auto;
        }
      }
    }
  }
}
</style>